<template>
    <div class="wrap">
        <div>
            <el-upload class="upload-demo"
                       ref="upload"
                       :multiple="false"
                       :drag="true"
                       :auto-upload="false"
                       :file-list="files"
                       :on-change="getFile"
                       :on-remove="removeFile"
                       :limit="fileLimitNum"
                       :on-exceed="handleExceed"
                       :before-upload="beforeImport"
                       @dragenter.native.stop.prevent
                       @dragover.native.stop.prevent
                       @drop.native.stop.prevent="handleFileDrop($event)">
                <div class="upload-demo-info">
                    <em class="el-icon-upload upload-icon"/>
                    <div class="el-upload__text">{{ $t('message.EletronicInfoTool.dragHere') }}
                        <em>{{ $t('message.EletronicInfoTool.clickUpload') }}</em>
                    </div>
                </div>
            </el-upload>
            <div v-if="errMsg !== ''" class="text-danger mt-2">{{ errMsg }}</div>
        </div>
        <div class="btn">
            <el-button type="primary" :disabled="importDisabled" @click="importAttributes">
                {{ $t('message.EletronicInfoTool.Import') }}
            </el-button>
            <el-button @click="close">{{ $t('message.EletronicInfoTool.close') }}</el-button>
        </div>
    </div>
</template>

<script>
import {electricalCommand} from "../../../command/ElectricalCommand";
import DialogMixin from "../DialogMixin";

export default {
    mixins: [DialogMixin],
    name: "CmdDlgEletronicInfoInput",
    data() {
        return {
            files: [],
            fileType: ['xml'],
            fileLimitNum: 1,
            errMsg: '',
            importDisabled: true,
        }
    },
    watch: {},
    computed: {},
    created() {
    },
    mounted() {
        electricalCommand.init(500, 300, 500, () => {

        });
    },
    methods: {
        //UI自适应
        changePluginContainerHeight() {
            electricalCommand.changePluginContainerHeight({
                minWidth: this.$el.clientWidth,
                maxHeight: this.$el.clientHeight,
            })
        },
        //文件状态改变时需要调用：添加文件、上传成功/失败都会调用
        getFile(file, fileList) {
            let filetype = this.getFileType(file.name);
            if (filetype !== 'xml') {
                this.errMsg = this.$t('message.EletronicInfoTool.importTypeError');
                this.importDisabled = true;
            } else {
                this.files.push(fileList[0]);
                this.errMsg = '';
                this.importDisabled = false;
            }
        },
        removeFile(file, fileList) {
            this.files = [];
            this.errMsg = '';
            this.importDisabled = true;
        },
        //上传前校验
        beforeImport(file) {
            //TODO 上传前的校验类型
            return true;
        },
        //导入
        importAttributes() {
            this.importDisabled = true;
            if (this.files.length === 1) {
                const loading = this.$loading({
                    lock: true,
                    text: this.$t('message.EletronicInfoTool.loading'),
                    spinner: 'el-icon-loading',
                });
                try {
                    electricalCommand.importProperty({file: this.files[0]}, res => {
                      if(res?.code === 200){
                        if(res?.data?.success) {
                          electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.importPropertyFileSuccessMsg') , 'success');
                          this.close();
                        } else if(!res?.data?.success) {
                          if(res?.data?.failInfoType === "ELECTRICAL_DOCUMENT_NULL") {
                            let msg = this.$t('message.EletronicInfoTool.importPropertyFileErrorMsg') + this.$t('message.EletronicInfoTool.documentNull')
                            electricalCommand.eventBusAlertMsg(msg, 'error');
                          } else if(res?.data?.failInfoType === "ELECTRICAL_ATTRIBUTE_NULL") {
                            let msg = this.$t('message.EletronicInfoTool.importPropertyFileErrorMsg') + this.$t('message.EletronicInfoTool.attributeListNull')
                            electricalCommand.eventBusAlertMsg(msg, 'error');
                          }
                        }
                      } else {
                        electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.importPropertyFileErrorMsg'), 'error');
                      }
                    })
                } catch (error) {
                    electricalCommand.eventBusAlertMsg(this.$t('message.EletronicInfoTool.importPropertyFileErrorMsg') + error, 'error');
                } finally {
                    loading.close();
                    this.importDisabled = false;
                }
            }
        },
        //获取上传文件的文件类型
        getFileType(fileName) {
            let delimiterIndex = fileName.lastIndexOf('.');
            return fileName.substring(delimiterIndex + 1).toLowerCase();
        },
        //关闭
        close() {
            electricalCommand.closeActiveCmd();
        },
        //文件超出数量限制的
        handleExceed(file, fileList) {
            electricalCommand.eventBusAlertMsg('一次只能上传一个文件', 'warning');
        },
        handleFileDrop(event) {
            // debugger
            // for (let i = 0; i < event.dataTransfer.items.length; i++) {
            //     let item = event.dataTransfer.items[i];
            //     let file = item.getAsFile();
            //     if (item.webkitGetAsEntry().isDirectory) {
            //         file.isDirectory = true;
            //         this.errorMessage = this.$t('message.PointCloud.importType');
            //     } else {
            //         file.isDirectory = false;
            //     }
            // }
        },
    },
}
</script>

<style scoped>
.wrap {
    font-size: 12px;
}

.upload-icon {
    font-size: 2em;
    margin: 0;
    color: #C0C4CC;
}
</style>